<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css表单</title>
  <style>
    input{
      width: 100%;
    }
    input[type=text]:focus{
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
    /*  带边框的输入框*/
    /*  border: 2px solid red;*/
    /*  border-radius: 4px;*/
    /*  仅需要下边框*/
      border: none;
      border-bottom: 2px solid red;
      background-color: #1abc9c;
      color: white;
    }
    .input1[type=text]{
      width: 130px;
      box-sizing: border-box;
      border: 2px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
      background-color: white;
      background-image: url("/img/Snipaste.png");
      background-position: 10px 10px;
      background-repeat: no-repeat;
      padding: 12px 20px 12px 40px;
      transition: width 0.4s ease-in-out;
    }
    .input1[type=text]:focus{
      width: 100px;
    }
    body{
      counter-reset: section;
    }
    h1 {
      counter-reset: subsection;
    }
    h2::before{
      counter-increment: section;
      content: "Section "counter(section) ":";
    }
    h2::before{
      counter-increment: subsection;
      content: counter(section)"."counter(subsection)" ";
    }
  </style>
</head>
<!--
适用于所有 <input> 元素。如果只想设置特定输入类型的样式，则可以使用属性选择器：

input[type=text] - 将仅选择文本字段
input[type=password] - 将仅选择密码字段
input[type=number] - 将仅选择数字字段

填充输入框
使用 padding 属性在文本字段内添加空间。
提示：若有很多输入，那么您可能还需要添加外边距，以便在它们之外添加更多空间：
我们已将 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框。

   /*  带边框的输入框*/
    /*  border: 2px solid red;*/
    /*  border-radius: 4px;*/
    /*  仅需要下边框*/
      border: none;
      border-bottom: 2px solid red;
      边框背景颜色
      background-color: #1abc9c;
      color: white;
      获得焦点的输入框
默认情况下，某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。您可以通过向输入添加 outline: none; 来消除此行为。
使用 :focus 选择器可以在输入字段获得焦点时为其设置样式：

使用带图标/图像的输入框
input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}
如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间：

css计数器 由css保持的变量 其值可以通过css规则递增 以跟踪其使用次数
带计数器的自动编号
CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。

如需使用 CSS 计数器，我们将使用以下属性：

counter-reset - 创建或重置计数器
counter-increment - 递增计数器值
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素
如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。

下面的例子为页面（在 body 选择器中）创建一个计数器，然后为每个 <h2> 元素增加计数器值，并在每个 <h2> 元素的开头添加 "Section <value of the counter>:"：


-->
<body>
<div>
  <h2>使用width属性来确定输入字段的宽度</h2>
  <p>全宽的输入字段: </p>
  <form>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname">
  </form>
</div>
<div>
  <h2>已填充字段</h2>
  <form action="">
    <label for="fname1">First Name</label>
    <input type="text" id="fname1" name="fname1">
    <label for="lname1">Last Name</label>
    <input type="text" id="lname1" name="lname1">
  </form>
</div>
<div>
  <p>带有动画效果的输入字段 : </p>
  <form action="">
    <input class ="input1" type="text" name="search" placeholder="Search..">
  </form>
</div>
<div>
  <h1>使用css 计数器:</h1>
  <h2>HTML 教程</h2>
  <h2>CSS 教程</h2>

  <h1>Scripting 教程:</h1>
  <h2>JavaScript</h2>
  <h2>VBScript</h2>

  <h1>XML 教程:</h1>
  <h2>XML</h2>
  <h2>XSL</h2>
</div>
</body>
</html>
